<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dateGrid9+分页对象</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"
	charset="utf-8"></script>
<link rel="stylesheet" href="/static/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="/static/easyui/themes/icon.css">
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="static/easyui/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/js/yzy.js"></script>	
<script type="text/javascript">
		$(function(){
			var editing;//判断用户是否处于新增状态
			
			
			
			var h = document.documentElement.clientHeight || document.body.clientHeight;
			$('#t_table').datagrid({
				url:'testpage',
				idField:'id',		//进行数据处理时传到后台的参数
				pagination:true,	//分页
				pageSize:20,
				pageList:[10,20,30,40,50],
				height:h,
				fitColumns:true,	//宽度是否自适应
				striped:true,	//隔行变色 斑马色
				loadMsg:'数据正在疯狂的加载中...',//加载数据时显示的内容
				rownumbers:true,	//显示序号
				singleSelect:false,	//单选模式
				scrollbarSize:0,	//滚动条宽度
				frozenColumns:[ [ 
					{
						field:'ck',
						width:10,
						checkbox:true
					}
				] ],
				columns:[ [
					{field:'id',title:'编号',width:80,align:"center",sortable:true,
						//进行单元格进行修改
						editor:{
							type:'numberbox',
							options:{
								required:true,
								missingMessage:'用户必填'
							}
						},
						
						styler:function(value,record){/* 给某一个单元格赋予属性 */
							if(value == 29){
								return 'background:red';
							}
						},
						formatter:function(value,record,index){//鼠标悬停显示数据
							return '<span title='+value+'>'+value+'</span>'
							
							/* var str='';
							$.ajax({		//写所属城市的时候，穿到前台的是数字的时候，即不是所需要的东西，就要传到后台去
								type:'post',
								url:'',
								cache:false,
								async:false,//同步请求 重点
								data:{id:value},
								dataType:'josn',
								success:function(result){
									str=result.name;
								}
							});
							return str; */
						},
						
					
					},
					{field:'name',title:'姓名',width:80,align:"center",
						editor:{
							type:'validatebox',
							options:{
								required:true,
								missingMessage:'姓名必填'
							}
						}	
					},
					{field:'sex',title:'性别',width:80
						,formatter:function(value,record,index){/* 改变参数显示效果 */
								if(value=='男'){
									return '<span >男</span>';
								}else if(value=='女'){
									return '<span >女</span>';
								}
							},
							editor:{
								type:'combobox',
								options:{
									data:[{id:1,val:'男'},{id:2,val:'女'}],
									panelHeight:60,
									valueField:'val',
									textField:'val',
									required:true,
									missingMessage:'性别必填',
									editable:false
								}
							},
					},
					{field:'test',title:'测试',width:80
						,	editor:{
							type:'combobox',
							options:{
								url:'com/test01',
								valueField:'id',
								textField:'name',
								required:true,
								missingMessage:'测试必填',
								editable:false
							}
						}	
					},
					{field:'endtime',title:'时间',width:80,
						editor:{
							type:'datetimebox',
							option:{
								required:true,
								messingMessage:'时间必选',
								editable:false
							}
						}
							
					},
					{field:'username',title:'用户名',width:80
						,	editor:{
							type:'numberbox',
							options:{
								required:true,
								missingMessage:'密码必填',
								min:1,
								max:2000,
								precision:2
							}
						}	
					},
					{field:'password',title:'密码',width:80,sortable:true,
						editor:{
							type:'validatebox',
							options:{
								required:true,
								missingMessage:'密码必填',
								
							}
						}		
					},
					
				] ],
				toolbar:[
					{
						text:'新增用户',
						iconCls:'icon-add',
						handler:function(){
							if(editing == undefined){
								//0.先取消所有选中状态
								$('#t_table').datagrid('unselectAll');
								//2.增加一行空白
								$('#t_table').datagrid('appendRow',{id:''});
								//3.获取当前页的行号
								editing = $('#t_table').datagrid('getRows').length -1;
								//4.开启编辑状态
								$('#t_table').datagrid('beginEdit', editing);
							}else{
								$.messager.show({
									title:'提示信息',
									msg:'您正在添加用户，保存或取消以后才能另增！'
								});
							}
							
						}
					},{
						text:'修改用户',
						iconCls:'icon-edit',
						handler:function(){
							var arr= $('#t_table').datagrid('getSelections');
							if(arr.length!=1){
								$.messager.show({
									title:'提示信息',
									msg:'您只能选择一条记录进行修改！'
								});
							}else{
								if(editing == undefined){
									//根据行记录获取该行的索引位置
									editing= $('#t_table').datagrid('getRowIndex',arr[0]);
									//开启编辑状态
									$('#t_table').datagrid('beginEdit',editing);
								}
							}
						}
					},{
						text:'保存用户',
						iconCls:'icon-save',
						handler:function(){
							//保存前，进行数据的校验，然后结束编辑并释放编辑状态
							if($('#t_table').datagrid('validateRow',editing)){
								$('#t_table').datagrid('endEdit',editing);
								editing = undefined;
							}else{
								$.messager.show({
									title:'提示信息',
									msg:'您的输入存在问题'
								});
							}
						}
					},{
						text:'删除用户',
						iconCls:'icon-remove',
						handler:function(){
							var arr= $('#t_table').datagrid('getSelections');
							if(arr.length<=0){
								$.messager.show({
									title:'提示',
									msg:'请选择删除的用户'
								});
							}else{
								//获取所有删除用户的姓名 并保存下来 然后给用户提示
								var dele="";
								for(var i=0 ;i<arr.length;i++){
									dele +='('+ arr[i].name+')&emsp;';
								}
								dele = dele.substring(0 , dele.length-6)
								$.messager.confirm('确定删除?','删除名单(姓名):<br/> '+dele,function(r){
									if(r){//确定了
										var ids="";
										for(var i=0 ;i<arr.length;i++){
											ids += arr[i].id+',';
										}
										
										ids = ids.substring(0 , ids.length-1)
										$.post('delete',{ids:ids},function(result){
											//1.刷新数据表格
											$('#t_table').datagrid('reload');
											//2.清空idField
											$('#t_table').datagrid('unselectAll');
											//2.给提示信息
											$.messager.show({
												title:'提示',
												msg:'删除成功！'
											});
										});
									}else{
										return ;
									}
								});
								
							}
						}
					},{
						text:'取消操作',
						iconCls:'icon-cancel',
						handler:function(){
							//回滚数据  取消的操作
							$('#t_table').datagrid('rejectChanges');
							//释放状态
							editing = undefined;
						}
					},
					
				],
				onAfterEdit:function(index,record){//完成编辑一行的时候触发  保存
					$.post('add',record,function(result){
						$('#t_table').datagrid('reload');
						$.messager.show({
								title:'提示信息',
								msg:'操作成功！'
						});
					});
				}
			});
			
			
			

		});
	</script>
<style type="text/css">
body {
	margin: 0px;
}

</style>
</head>
<body>
	<div id="lay" style="width: 100%;height: 100%;">
		
		<div region='center'>
			<table id="t_table"></table>
		</div>
	</div>
	
</body>
</html>